<template>
  <div>
<admin-nav/>
    <div class="container-fluid">
      <div class="row">
        <admin-left/>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">所有众筹项目</h1>

          <div class="panel panel-default">
            <div class="panel-body">
              <form class="form-inline">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputName2"
                    placeholder="项目名称"
                  />
                </div>
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputName2"
                    placeholder="项目发起人"
                  />
                </div>
                <div class="form-group">
                  <select class="form-control">
                    <option>项目状态</option>
                    <option value="0">众筹中</option>
                    <option value="1">众筹失败</option>
                    <option value="2">众筹成功</option>
                  </select>
                </div>
                <div class="form-group">
                  <select class="form-control">
                    <option value="" selected>项目类型</option>
                    <option v-for="item in typeList" :key="item.name" :value="item.id">{{item.name}}</option>
                  </select>
                </div>
                &nbsp;&nbsp;
                <button type="submit" class="btn btn-default btn-primary">
                  查询
                </button>
              </form>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <div class="panel-title">所有项目列表</div>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>项目类型</th>
                      <th>项目名称</th>
                      <th>项目进度</th>
                      <th>开始日期</th>
                      <th>结束日期</th>
                      <th>已筹金额</th>
                      <th>发起人</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="product666 in dataShow" :key="product666.id" :value="product666.id">
                      <td>{{product666.id}}</td>
                      <td>{{product666.typeName}}</td>
                      <td>{{product666.title}}</td>
                      <td>{{product666.jindu}}%</td>
                      <td>{{product666.time1}}</td>
                      <td>{{product666.time2}}</td>
                      <td>{{product666.money}}￥</td>
                      <td>{{product666.userName}}</td>
                      <td>
                        {{msg}}
                        <a @click="detailInfo(product666.id)">详情</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <nav aria-label="Page navigation" class="text-right">
                <ul class="pagination">
                  <li class="disabled">
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li><a href="#" @click="prePageFirst">首页</a></li>
                  <li><a href="#" @click="prePage">上一页</a></li>
                  <li v-for="(item2, index) in pageNum" :key="item2"><a href="#" @click="toPage(index)" :class="{active: currentPage==index}"> &nbsp; {{ index+1 }} </a></li>
                  <li><a href="#"  @click="nextPage">下一页</a></li>
                  <li><a href="#" @click="prePageLast">末页</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import admin_left from './admin_left.vue';

export default {
  components: { admin_left },
  data() {
    return {
      typeList:[],// 返回的下拉框类型的数据
      selectedOption: '', // 选中的下拉框
      projectLists:[],
      msg:'',
      pageSize:2,
      currentPage:0
    }
  },
  created(){
        // 项目类型回显
    this.$axios.get('http://localhost:8080/getType').then(response => {
    if(response.data.code===1){
      console.log(response.data.data)
      this.typeList = response.data.data
    }else{
      this.typeList = response.data.msg
    }
   })

  // 查询所有项目
  this.$axios.get('http://localhost:8080/getAllProjects').then(response =>{
    if(response.data.code===1){
      console.log(response.data.data)
      this.projectLists = response.data.data
    }else{
      this.msg = response.data.msg
    }
   })
  },
  computed:{
    // 分页后的数据
    dataShow: function(){
                let start = this.currentPage*this.pageSize;
                let end = Math.min((this.currentPage+1)*this.pageSize, this.projectLists.length)
                return this.projectLists.slice(start, end)
            },
    // 页码数
      pageNum: function(){
          return Math.ceil(this.projectLists.length / this.pageSize) || 1 ;
      },
  },
  methods:{
      prePageFirst:function(){//首页
          var vm = this;
          vm.currentPage=0;
      },
      nextPage: function(){//下一页
          var vm = this;
          if (vm.currentPage == vm.pageNum - 1) return;
          vm.currentPage++;

      },
      prePage: function(){//上一页
          var vm = this;
          if (vm.currentPage == 0)
          return;
          vm.currentPage--;

      },prePageLast:function(){//末页
          var vm = this;
          vm.currentPage=vm.pageNum-1;
      },
      toPage: function(page){
          var vm = this;
          vm.currentPage = page
      },
      // 点击详情，把对应product放session里面去
      detailInfo(id){
          sessionStorage.setItem("getProductById",id)
          // alert(id)
            this.$router.push('/productInfo')
      }
  }
};
</script>

<style scoped>
    @import url('../../../public/css/bootstrap.min.css');
    @import url('../../../public/css/dashboard.css');

</style>